<template>
	<div class="signal-container" :style="{ transform: 'scale(' + _scaleX + ',' + _scaleY + ')' }">
		<ul>
			<li
				v-for="i in 6"
				:key="i"
				:style="{
					background: '' + (i <= strength ? color : 'rgba(0, 0, 0, 0.4)') + '',
				}"
			></li>
		</ul>
	</div>
</template>

<script>
export default {
	name: `SignalStrength`,
	props: {
		// 尺寸
		width: {
			type: Number,
			default: 60,
		},
		height: {
			type: Number,
			default: 40,
		},
		// 信号强度，默认满格信号
		strength: {
			type: Number,
			default: 6,
			validator: function (value) {
				// 必须为不大于6的整数
				if (value > 6 || value < 0) {
					console.error(`ERROR in 'SignalStrength.vue':you must provide a number <=6 and >=0!`)
					return false
				} else {
					return true
				}
			},
		},
	},
	computed: {
		_scaleX() {
			return this.width / 60
		},
		_scaleY() {
			return this.height / 40
		},
		color() {
			if (this.strength < 3) {
				return 'red'
			} else if (this.strength >= 3 && this.strength < 5) {
				return '#e7d055'
			} else if (this.strength >= 5 && this.strength <= 6) {
				return '#5cf548'
			}
		},
	},
}
</script>

<style lang="less" scoped>
* {
	margin: 0;
	padding: 0;
	list-style: none;
}
.signal-container {
	width: 60px;
	height: 40px;
}
ul {
	position: relative;
	width: 100%;
	height: 100%;
}
li {
	width: 7px;
	position: absolute;
	bottom: 0;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.5);
}
ul li:nth-child(1) {
	height: 10px;
	left: 0px;
}
ul li:nth-child(2) {
	height: 15px;
	left: 10px;
}
ul li:nth-child(3) {
	height: 20px;
	left: 20px;
}
ul li:nth-child(4) {
	height: 25px;
	left: 30px;
}
ul li:nth-child(5) {
	height: 30px;
	left: 40px;
}
ul li:nth-child(6) {
	height: 35px;
	left: 50px;
}
</style>
